<template>
  <div>
    <a-modal v-model:open="modalOpen" title="禁用" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
          ref="formRef"
        >
          <a-form-item
            label="禁用原因"
            name="disableReason"
            :rules="[{ required: true, message: '禁用原因不能为空!' }]"
          >
            <a-textarea
              :rows="6"
              v-model:value="formData.disableReason"
              placeholder="输入禁用原因"
              :maxlength="500"
            />
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-button @click="handleCancel">关闭</a-button>
            <a-button type="primary" @click="handleSubmit">确认禁用</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import { accountDisable } from "@/api/userManger";
const modalOpen = ref(false);
const formRef = ref(null);
const formData = ref({
  id: "",
  disableReason: "",
});

const open = (id) => {
  formData.value.id = id;
  formData.value.disableReason = "";
  modalOpen.value = true;
};
const emits = defineEmits("refreshList");
const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    const data = await accountDisable(formData.value);
    if (data.code == 200) {
      message.info("禁用成功");
      modalOpen.value = false;
      emits("refreshList", true);
    }
  });
};
function handleCancel() {
  modalOpen.value = false;
}
defineExpose({ modalOpen, open });
</script>

<style lang="less">
.img-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}

.modal-but-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
